<!--
<script setup lang="ts">
import {ref, provide, computed, onMounted, inject} from "vue";
import { ElButton, ElRow } from "element-plus";
import {Ref} from "@vue/runtime-dom";


// 当前选中的顶部标签索引
const selectedTopLabelIndex = ref(0);

// 提供共享状态
provide('topLabels', topLabels);
provide('selectedTopLabelIndex', selectedTopLabelIndex);
console.log(inject<Ref<number>>('selectedTopLabelIndex'),4444444);
// 选择顶部标签的方法
const selectTopLabel = (index: number) => {
  selectedTopLabelIndex.value = index;
};


// 页面加载时默认选中“系统资源”
onMounted(() => {
  selectTopLabel(0); // 确保页面加载时默认选中“系统资源”
});

</script>

<template>
  <div class="header">
    <el-button
        v-for="(label, index) in topLabels"
        :key="index"
        @click="selectTopLabel(index)"
        :class="{ 'is-active': selectedTopLabelIndex === index }"
        class="nav-button"
    >
      <span class="span">{{ label.label }}</span>
    </el-button>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  width: 18vw;
}


.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #303648; */
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #435486; */
  width: 100%;
  height: 100%;
  color: white; /* 确保文字颜色与背景对比明显 */
}

.box img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  margin-bottom: 1vh;
}
.header .span{
  font-size: 0.8vw;
}
:deep .el-button {
  /* padding: 0; */
  width: 4vw !important;
}
:deep .el-button {
  margin-left: 0.4vw !important;
  height: 3.4vh;
  margin-top: 0.75vh;
  background: #5882d6;
  border: none;
  color: #ffffff;
}
</style>
-->
